<template>
  <div class="repayment">
    <van-nav-bar
        :title="$t('repayment_details')"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <div class="wrapper">
      <div class="card">

        <!--          通过金额-->
        <div class="card_item" v-show="details.passAmount">
          <span>{{ $t('order_approved_amoun') }}</span> :<span class="symbol">{{
            $t('symbol')
          }}</span><span>{{ formatterMoney(details.passAmount) }}</span>
        </div>
        <!--          借款周期-->
        <div class="card_item" v-show="details.loanTerm">
          <span>{{ $t('loan_term') }}</span> :<span>{{ details.loanTerm }}</span>
        </div>
        <!--          利息费用-->
        <div class="card_item" v-show="details.shouldInterest">
          <span>{{ $t('rateFee_detail') }}</span> :<span class="symbol">{{
            $t('symbol')
          }}</span><span>{{ formatterMoney(details.shouldInterest) }}</span>
        </div>
        <!--          最后还款日-->
        <div class="card_item" v-show="details.lastRepaymentDay">
          <span>{{ $t('order_last_pay_time') }}</span> :<span>{{ details.lastRepaymentDay }}</span>
        </div>
        <!--          逾期罚息-->
        <div class="card_item" v-show="details.totalOverdueFine">
          <span>{{ $t('order_overdue_interest') }}</span> :<span class="symbol">{{ $t('symbol') }}</span><span>{{
            formatterMoney(details.totalOverdueFine)
          }}</span>
        </div>
        <!--          已还金额-->
        <div class="card_item" v-show="details.totalOverdueFine">
          <span>{{ $t('delay_already_repayment') }}</span> :<span class="symbol">{{ $t('symbol') }}</span><span>{{
            formatterMoney(details.actualTotal)
          }}</span>
        </div>
        <!--         应还金额-->
        <div class="card_item" v-show="details.notTotal" style="margin-bottom: 0">
          <span>{{ $t('amount_due') }}</span> : <span class="symbol">{{
            $t('symbol')
          }}</span><span>{{ formatterMoney(details.shouldTotal) }}</span>
        </div>
      </div>
      <div class="card" style="margin-top: 10px">
        <!--          本次还款金额-->
        <div class="card_item" v-show="details.shouldTotal" style="margin-bottom: 0">
          <span>{{ $t('amount_this_repayment') }}</span> :<span class="symbol">{{ $t('symbol') }}</span>
          <span>{{formatterMoney(details.notTotal) }}</span>
        </div>
      </div>
      <div class="pay_button">
        <div>
          <!--          虚拟卡支付-->
          <button class="button" @click="virtualCardPay">{{ $t('repayment_virtual_card') }}</button>
        </div>
        <!--        <div style="margin-top: 15px">-->
        <!--          <button class="button">{{ $t('repayment') }}</button>-->
        <!--        </div>-->
      </div>
      <van-dialog v-model:show="visibleShow" :title="$t('repayment_confirm')" @confirm="visibleConfirm"
                  show-cancel-button>
        <div style="text-align: center;padding: 15px;box-sizing: border-box;font-weight: 600">
          <div>{{ $t('repayment_amount') }}: {{ formatterMoney(details.notTotal) }}</div>
          <div>{{ $t('repayment_type') }}: {{ $t('repayment_virtual_card') }}</div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import router from '@/router/index'
import {repaymentDetails, registerVirtual} from '@/api/order'
import {ref} from "vue";
import {Dialog, Toast} from "vant";
import {loginOut} from "@/api/my";
import {useI18n} from "vue-i18n";
import {useStore} from "vuex";
import {formatMoney} from "@/utils/tool";

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  setup() {
    const {loanRecordId} = router.currentRoute.value.query
    const visibleShow = ref(false)
    const store = useStore()
    const details = ref({})
    const fetchRepaymentDetails = async () => {
      const res = await repaymentDetails({
        loanRecordId
      })
      if (res.code === 1) {
        details.value = res.data
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    }
    const virtualCardPay = () => {
      visibleShow.value = true
    }
    const visibleConfirm = async () => {
      const res = await registerVirtual({
        payAmount: details.value.shouldTotal,
        payType: 1,
        rollDay: 0
      })
      if (res.code === 1) {
        router.push({
          path: '/virtualCardPay',
          query: {
            loanRecordId: loanRecordId
          }
        })
      }
    }
    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value, 0, "", '.')
      } else {
        return value
      }
    }
    fetchRepaymentDetails()
    return {
      visibleShow,
      details,
      virtualCardPay,
      visibleConfirm,
      formatterMoney
    }
  }
}
</script>

<style scoped lang="less">
.repayment {
  background-color: #f2f3f5;
  position: relative;
  overflow: auto;

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  ::v-deep .van-switch {
    height: 26px !important;

    .van-switch__node {
      height: 26px !important;
    }
  }

  .wrapper {
    padding: 10px;

    .card {
      background-color: #FFFFFF;
      box-sizing: border-box;
      padding: 15px;

      .card_item {
        font-size: 13px;
        margin-bottom: 5px;


        .text {
          color: #828282;
        }

        .value {
          color: #333333;
          margin-left: 5px;
        }
      }
    }

    .pay_button {
      margin-top: 40px;
      text-align: center;

      .button {
        width: 80%;
        padding: 5px 0;
        color: #ffffff;
        border: none;
        font-size: 16px;
        border-radius: 14px;
        margin-bottom: 10px;
        background: linear-gradient(-45deg, #FF5252, #FF8C3C);
        box-shadow: 0px 4px 10px 0px
      }
    }
  }

}
</style>
